<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏匹配大厅</title>
    <link rel="stylesheet" href="./css/game_hall.css">
    <link rel="stylesheet" href="./css/common.css">
</head>
<body>
    <div class="nav">在线五子棋对战平台</div>
    <!-- container 作为整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中需要处于垂直水平居中的位置-->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮（再次点击就应该显示 "结束匹配"） -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="./js/jquery.js"></script>
    <script>
        $.ajax({
            type: 'get',
            url: '/user/getUser',
            success: function(result) {
                // 获取到显示用户信息的 screen 标签(<br>是前端的换行符)
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = "玩家: " + result.username + "<br> 分数: " + result.score 
                    + "<br> 比赛总场数: " + result.totalCount + "  获胜场数: " + result.winCount;
            },
            error: function() {
                alert("获取用户信息失败, 请稍后尝试");
            }
        });

        // 此处进行 websocket 的初始化, 并且实现前端的匹配逻辑.(和之前测试的一样)
        // 此处的路径注意要写作 /findMatch, 不能写作 /findMatch/
        let webSocketUrl = "ws://" + location.host + "/findMatch"
        let websocket = new WebSocket(webSocketUrl);
        websocket.onopen = function() {
            // 回调函数: 在连接建立好后就会调用.
            console.log("连接建立");
        }
        websocket.onclose = function() {
            // 在连接关闭时, 调用.
            console.log("连接断开");
        }
        websocket.onerror = function() {
            // 在连接异常时会去调用.
            console.log("连接异常");
        }

        // 监听页面关闭事件, 在页面关闭之前, 手动调用这里的 close 方法
        // 当用户关闭浏览器标签页时, 就能够触发这一函数, 让服务器知道用户断开连接了
        window.onbeforeunload = function() {
            websocket.close();
        }

        // 消息处理, 处理服务器返回的响应
        // 下面的点击事件只是把数据发送给服务器, 这里需要处理服务器发来的响应
        websocket.onmessage = function(result) {
            // 这个响应数据就是针对 '开始匹配/结束匹配' 来进行操作
            // 解析得到的响应对象, 得到的数据是一个 JSON 字符串, 需解析成 js 对象(.data拿到的就是载荷数据)
            let resp = JSON.parse(result.data);

            // 获取按钮标签
            let matchButton = document.querySelector('#match-button');
            if(!resp.success) {
                console.log("游戏大厅中接收到了非法响应: " + resp.reason);
                return;
            }else if(resp.message == 'startMatch') {
                // 说明服务器开始给客户端寻找对手了
                console.log("进入匹配队列成功");
                // 这里就需要修改按钮的样式, 变成停止匹配(要与下面的文本内容对应)
                matchButton.innerHTML = '匹配中...(点击停止匹配)';
            }else if(resp.message == 'stopMatch') {
                // 说明客户端这边结束匹配的请求发送成功
                // 结束匹配后, 按钮就要修改成 '开始匹配'
                matchButton.innerHTML = '开始匹配';
            }else if(resp.message == 'matchSuccess') {
                // 说明匹配到对手了
                console.log("匹配成功, 正在进入游戏房间");
                location.replace("/game_room.html");
            }else if (resp.message == 'repeatConnection') {
                alert("禁止重复登录同一个账号.")
                location.href = 'login.html';
            }else {
                // 这里是处理异常情况
                console.log("收到了非法的响应: " + resp.reason);
            }

        }

        // 这里给匹配按钮添加一个点击事件
        // 选择按钮的标签
        let matchBtn = document.querySelector('#match-button');
        matchBtn.onclick = function() {
            // 在触发 websocket 请求之前, 先确认下 websocket 连接是否正常.
            if(websocket.readyState == websocket.OPEN) {
                // 如果当前 readyState 处于 OPEN 状态, 则说明连接是正常的
                // 这里就来处理发送的数据: 存在两种情况 --> 开始匹配/停止匹配
                if (matchBtn.innerHTML == '开始匹配'){
                    // 如果按钮里面的文字是 '开始匹配', 则执行这里的逻辑
                    console.log("开始匹配");
                    // 因为发送的数据是以 json 格式发送, 所以需要将数据从 JS对象 转成 JSON 字符串
                    websocket.send(JSON.stringify(
                        {
                            message: 'startMatch'
                        }
                    ));

                } else if(matchBtn.innerHTML == '匹配中...(点击停止匹配)') {
                    console.log("停止匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'stopMatch',
                        }
                    ));
                }
            } else {
                // 到这步说明连接是异常的状态
                alert("当前连接异常, 请尝试重新登录");
                location.replace('/login.html');
            }
        }
    </script>
    
</body>
</html>